<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card style="height:800px">
        <Card>
            <header>
                <span>姓名:</span>
                <Input v-model="withholeCondition.custName" placeholder="姓名" style="width: 150px" />
                <span style="width: 200px;margin-left: 15px;" >身份证:</span>
                <Input v-model="withholeCondition.custCardNo" placeholder="身份证" style="width: 150px" />
                <span style="width: 200px;margin-left: 15px;" >执行结果:</span>
                <Select v-model="withholeCondition.applyStatus" style="width: 150px" placeholder="执行结果">
                    <Option v-for="item in auditResults" :value="item.value" :key="item.value">{{item.label}}</Option>
                </Select>
                <span style="width: 200px;margin-left: 15px;" >申请时间(起):</span>
                <DatePicker type="date" placeholder="申请时间(起)" v-model="withholeCondition.applyBeginDate" id="applyBeginDate" style="width: 150px" value="yyyy-MM-dd"></DatePicker>
                <span> - </span>
                <span>申请时间(止):</span>
                <DatePicker type="date" placeholder="申请时间(止)" v-model="withholeCondition.applyEndDate" id="applyEndDate" style="width: 150px" value="yyyy-MM-dd"></DatePicker>
                <span style="width: 200px;margin-left: 15px;" >执行状态:</span>
                <Select v-model="withholeCondition.payResult" style="width: 150px" placeholder="执行状态">
                    <Option v-for="item in statusList" :value="item.value" :key="item.value">{{item.label}}</Option>
                </Select>
                <Button type="primary" @click="listQuery" style="margin-left: 15px;">查询</Button>
            </header>
        </Card>
        <Card>
            <Table border :columns="columns" :data="columnDatas" style="width: 100%;"></Table>
            <div style="margin-top: 100px;text-align: center;">
                <Page :total="withholeCondition.total" :current="withholeCondition.pageNum" :page-size="withholeCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
    </Card>

</template>

<script>

export default {

  data () {
    return {
      withholeCondition: {
        loanId: '',
        custName: '',
        applyBeginDate: '',
        applyEndDate: '',
        custCardNo: '',
        applyStatus: '',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        payResult: ''
      },
      auditResults: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '1',
          label: '已执行'
        },
        {
          value: '2',
          label: '拒绝'
        }
      ],
      statusList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '1',
          label: '处理中'
        },
        {
          value: '2',
          label: '代扣结果成功'
        },
        {
          value: '9',
          label: '代扣失败'
        }
      ],
      columns: [
        {
          title: '期数',
          key: 'tenor',
          align: 'center'
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '证件号码',
          key: 'custCardNo',
          align: 'center'
        },
        {
          title: '申请代扣金额',
          key: 'applyAmount',
          align: 'center'
        },
        {
          title: '实际代扣金额',
          key: 'withholdAmountAct',
          align: 'center'

        },
        {
          title: '申请人',
          key: 'applyUser',
          align: 'center'
        },
        {
          title: '申请时间',
          key: 'applyTime',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.applyTime))
            ])
          }
        },
        {
          title: '审批人',
          key: 'auditUser',
          align: 'center'
        },
        {
          title: '审批时间',
          key: 'auditTime',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.auditTime))
            ])
          }
        },
        {
          title: '审核结果',
          key: 'auditResult',
          align: 'center',
          render: (h, params) => {
            if (params.row.auditResult === '1') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '通过')
            }
            if (params.row.auditResult === '2') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '拒绝')
            }
          }
        },
        {
          title: '代扣时间',
          key: 'withholdTime',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.withholdTime))
            ])
          }
        },
        {
          title: '通道',
          key: 'payChannel',
          align: 'center',
          render: (h, params) => {
            if (params.row.payChannel === 'FASTPAY') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '快付通支付')
            }
            if (params.row.payChannel === 'BF') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '宝付支付')
            }
          }
        },
        {
          title: '代扣结果',
          key: 'withholdResult',
          align: 'center',
          render: (h, params) => {
            if (params.row.withholdResult === '1') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '交易中')
            }
            if (params.row.withholdResult === '2' || params.row.withholdResult === '3' || params.row.withholdResult === '4') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '代扣成功')
            }
            if (params.row.withholdResult === '9') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '代扣失败')
            }
          }
        },
        {
          title: '代扣返回信息',
          key: 'withholdDesc',
          align: 'center'
        }

      ],
      columnDatas: []
    }
  },

  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
  },

  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.withholeCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.withholeCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/handleWithhold/service/handleWithholeReviewResult', this.withholeCondition).then(re => {
        var data = re.data
        vm.columnDatas = data.data.list
        vm.withholeCondition.total = data.data.total
      }).catch(er => {

      })
    }
  }

}
</script>

<style>
.withhold-payment-result-top-div {
  margin-top: 40px;
}

.withhold-payment-result-left-div {
  width: 150px;
  float: left;
  margin-left: 13px;
}

.withhold-payment-result-i-icon {
  float: left;
  margin-left: 20px;
}

.withhold-payment-result-font-div {
  float: left;
  margin-left: -88px;
  text-align: center;
}
.withhold-payment-result-popup-div {
  margin: 18px;
  width: 300px;
  margin-left: 27%;
  margin-top: 31px;
}
.withhold-payment-result-font-div {
  float: left;
  margin-left: -88px;
  text-align: center;
}
</style>
